/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */
.statistics-graph {

  .mode {
    font-size: 10px;
    text-align: center;
    padding: 20px;

    > input[type="radio"] {
      display: none;
    }

    > label {
      @include btn($white);
      display: inline;
      border-radius: 0;
      margin: -2px;
    }

    > label:first-of-type {
      border-right: 0;
      border-radius: 4px 0 0 4px;
    }

    > label:last-of-type {
      border-left: 0;
      border-radius: 0 4px 4px 0;
    }

    > input[type="radio"]:checked + label {
      cursor: pointer;
      border: $thin-border-stroke darken($main-border-color, 2%);
      @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
      color: $medium-prim-color;
      box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1);
    }
  }

  p {
    padding: 20px;
  }

  .preset {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:start;
    
    .navigation {
    
      @include btn($white);

      &.prev {
        @include fa-icon($fa-var-chevron-left, before, inline-block, 0 0 0 0, 0, inherit, 10px);
      }

      &.next {
        @include fa-icon($fa-var-chevron-right, after, inline-block, 0 0 0 0, 0, inherit, 10px);
      }
    }

    > div {
      width: 200px;
      font-size: 24px;
      display: inline-block;
     }
  }

  .total {
    float: left;
    position: absolute;
    padding-top: 14px;
    padding-left: 70px;
    font-size: 12px;
  }

  .download {
    float: right;
    padding-top: 14px;
    padding-right: 14px;
    margin-left: -100%;

    .download-icon {
        @include fa-icon($fa-var-download, before, inline-block, 0 0 0 0, 0, inherit, 30px);
    }
  }


  .custom {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    > *:first-child {
      width: 66%;
      text-align: right;
    }

    > * {
      width: 33%;
      text-align: left;
    }
  }
}
